<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-19 22:50:58
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-07-31 10:09:55
 * @FilePath: \work\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="login">
    <view class="main">
      <view class="title">跟单王报工登录</view>
      <uv-form :model="formModel" ref="uForm" :error-type="['toast', 'border-bottom']">
        <uv-form-item prop="phone" :leftIconStyle="{ color: '#4F76B9', fontSize: '32rpx' }" left-icon="account-fill">
          <uv-input v-model="formModel.phone" placeholder="请输入手机号" focus confirm-type="next" @confirm="focus = true" />
        </uv-form-item>
        <uv-form-item prop="password" :leftIconStyle="{ color: '#4F76B9', fontSize: '32rpx' }" left-icon="lock-fill">
          <uv-input :focus="focus" v-model="formModel.password" placeholder="请输入密码" confirm-type="go" @confirm="login" password></uv-input>
        </uv-form-item>
      </uv-form>
      <view class="login-box">
        <uv-button type="primary" class="login-element" @click="login" shape="circle" :ripple="true" ripple-bg-color="#F4F4F4"> 登录 </uv-button>
      </view>
    </view>
    <uv-toast ref="uToast" />
  </view>
</template>
<script>
  import store from '@/store/index.js'; //需要引入store
  let { state, commit } = store;
  export default {
    data() {
      return {
        cid: '',
        focus: false,
        value: '',
        formModel: {
          phone: '',
          password: ''
        },
        rules: {
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: ['change', 'blur']
            }
          ],

          phone: [
            {
              required: true,
              message: '此为必填字段',
              // blur和change事件触发检验
              trigger: ['blur', 'change']
            },
            {
              // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
              validator: (rule, value, callback) => {
                // 返回true表校验通过，返回false表示不通过
                return uni.$uv.test.mobile(value);
              },
              message: '电话号码格式错误',
              trigger: ['blur']
            }
          ]
        }
      };
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {},
    methods: {
      // 登录接口调用
      async login() {
        this.$refs.uForm
          .validate()
          .then(async () => {
            let data = await uni.$uv.http.post('users/login', this.formModel);
            let { current_org, auth_token, current_member } = data[0];
            commit('$uStore', {
              name: 'vuex_user',
              value: {
                current_org,
                auth_token,
                current_member
              }
            });
            uni.$uv.route({
              url: '/pages/index/index',
              type: 'redirectTo'
            });
          })
          .catch(val => {
            this.$refs.uToast.show({ overlay: false, message: val[0].message, type: 'error' });
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    flex-direction: column;
    height: 100vh;

    &-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    &-element {
      width: 90%;
    }

    .main {
      z-index: 2;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 20rpx #ccc;
      padding: 30rpx;
      width: 90%;
      margin: 0 auto;
      margin-top: 10%;
      height: 80%;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 50rpx;
        text-align: center;
        margin: 30rpx 0;
      }
      .more {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;

        &-list {
          flex: 1;
          overflow-y: auto;
        }

        &-button {
          display: inline-block;
          flex-grow: 0;
          margin-bottom: 20rpx;
          width: 100%;
        }
      }

      .go-back {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #4f76b9;
        .icon {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .forget {
      color: #4f76b9;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      .icon {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
</style>
